@import "@site/styles/index";

.popup-page {
  @at-root {
    .popup-box,
    .popup-box-right,
    .popup-box-left,
    .popup-box-bottom {
      background: #fff;
    }

    .popup-box,
    .popup-box-right {
      width: 100%;
      height: 100%;
      padding: r(20) r(20) r(300);
      -webkit-overflow-scrolling: touch;
    }

    .popup-box-left {
      width: r(280);
      height: 100%;
      padding: r(20) r(20) r(100);
    }

    .popup-box-top {
      width: 100%;
      padding: r(10);
      color: rgba(255, 255, 255, 0.85);
      background: rgba(0, 0, 0, 0.7);
      font-size: r(14);
      text-align: center;
    }

    .popup-box-bottom {
      height: r(450);
      padding: r(20) r(20) r(100);
    }

    body[data-theme='dark'] {
      .popup-box,
      .popup-box-right,
      .popup-box-left,
      .popup-box-bottom {
        background: #2b2c2d;
      }

      .popup-box-top {
        background: rgba(255, 255, 255, 0.3);
      }
    }
  }
}
